<!--情绪分析页面-->
<template>
  <!--  情绪分析-->
  <div
    ref="chart"
    style="margin: 0 auto; width: 600px; height:300px;"
  />
</template>

<script>
import axios from 'axios'

export default {
  name: 'Sentiment',
  data() {
    return {
      chart: null,
      data: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart: function() {
      const myChart = this.$echarts.init(this.$refs.chart)
      axios.get('http://localhost:10086/smart-admin-api/sentiment/ana/EN2008a').then((res) => {
        const data = res.data.data
        const dateList = data.map((item) => {
          return item.num
        })
        const valueList = data.map((item) => {
          return item.result
        })
        const option = {
          // Make gradient line here
          visualMap: {
            show: false,
            type: 'continuous',
            // seriesIndex: 0,
            min: 0,
            max: 4,
            inRange: {
              color: ['#4575b4', '#ffffbf', '#fee090', '#f46d43', '#a50026']
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            top: '7%', // 距离上边框7%
            bottom: '45%',
            left: '13%',
            right: '2%'
          },
          xAxis: {
            name: '时间',
            nameLocation: 'middle',
            nameTextStyle: {
              fontFamily: 'serif',
              fontSize: 14
            },
            data: dateList,
            axisTick: {
              show: false
            },
            // 坐标轴线
            axisLine: {
              symbol: ['none', 'arrow'], // 设置箭头
              symbolSize: [6, 6] // 箭头大小
            },
            // 刻度标签
            axisLabel: {
              show: false
            },
            maxInterval: 6
          },
          yAxis: {
            data: ['沮丧', '平静', '高兴', '激动', '生气'],
            axisLine: {
              show: false
            },
            splitLine: { // 网格线
              show: true, // 隐藏或显示
              alignWithLabel: true, // 使坐标轴刻度与标签对齐
              lineStyle: {
                type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
              }

            },
            axisTick: {
              show: false,
              alignWithLabel: true // 使坐标轴刻度与标签对齐
            },
            axisLabel: {
              textStyle: {
                fontFamily: 'serif',
                fontSize: 14
              }
            }
          },
          series: {
            type: 'line',
            showSymbol: false,
            data: valueList
          }
        }
        myChart.setOption(option)
      }).catch((err) => {
        console.log(err)
      })

      // const data = [['1', '情绪1'], ['2', '情绪1'], ['3', '情绪1'],
      //   ['4', '情绪4'], ['5', '情绪4'], ['6', '情绪4'], ['7', '情绪4'],
      //   ['8', '情绪3'], ['9', '情绪5'], ['10', '情绪1'], ['11', '情绪2'],
      //   ['12', '情绪1'], ['13', '情绪1'], ['14', '情绪1'], ['15', '情绪3'],
      //   ['16', '情绪2'], ['17', '情绪1'], ['18', '情绪1'], ['19', '情绪5'],
      //   ['20', '情绪5'], ['21', '情绪1'], ['22', '情绪1'], ['23', '情绪4'],
      //   ['24', '情绪5'], ['25', '情绪5'], ['26', '情绪3'], ['27', '情绪3'],
      //   ['28', '情绪1'], ['29', '情绪1'], ['30', '情绪2'], ['31', '情绪4'],
      //   ['32', '情绪4'], ['33', '情绪1'], ['34', '情绪1'], ['35', '情绪3'],
      //   ['36', '情绪5'], ['37', '情绪2'], ['38', '情绪1'], ['39', '情绪1'],
      //   ['40', '情绪1'], ['41', '情绪1'], ['42', '情绪2'], ['43', '情绪3'],
      //   ['44', '情绪4'], ['45', '情绪3'], ['46', '情绪4'], ['47', '情绪1'],
      //   ['48', '情绪5'], ['49', '情绪5'], ['50', '情绪4']]
    }
  }
}
</script>

<style scoped>

</style>
